<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/result.css">
		<link rel="icon" href="/static/image/logo.ico"> <!-- 这个是新增的 -->
		<title>卡玩</title>
		<style>
			.official {
				width: 100%;
				background-color: black;

				img {
					width: 100%;
					height: 100%;
					vertical-align: bottom;
				}
			}

			.mark {
				width: 55vw;
				position: absolute;
				left: 50%;
				top: 20vh;
				transform: translateX(-50%);

				img {
					width: 100%;
					height: 100%;
					vertical-align: bottom;
				}
			}

			.centerBoll {
				width: 407px;
				height: 407px;
				position: absolute;
				top: 10vh;
				left: 50%;
				transform: translateX(-50%);

				img {
					width: 100%;
					height: 100%;
					vertical-align: bottom;
				}
			}

			.content {
				position: relative;
			}

			.topContent {
				width: 100%;
				height: 82px;
				background: rgba(23, 12, 63, 0.75);
				position: absolute;
				top: 0;
				left: 0;
				padding-left: 20px;
				/* line-height: 63px; */
				display: flex;
				align-items: center;

				img {
					width: 254px;
					height: 41px;
				}

				.navBar {
					display: flex;
					margin-left: 60px;

					.navItem {
						color: #fff;
						margin-right: 48px;
						padding: 10px 0;
						cursor: pointer;
					}
				}

				.navBarActive {
					color: #B48EFF !important;
					border-bottom: 2px solid #B48EFF;
				}

				/* color: #170C3F; */
			}

			.footerTips {
				display: flex;
				position: absolute;
				left: 50%;
				bottom: 10px;
				transform: translateX(-50%);
				/* bottom: 7.4vh; */
				text-align: center;
				color: rgba(255, 255, 255, .5);
			}
		</style>
	</head>
	<body style="margin: 0;">
		<div class="content">
			<div class="topContent">
				<div>
					<img src="../image/logo.png" alt="" />
				</div>
				<div class="navBar">
					<div class="navItem " id="navItem1" onclick="selectBar(1)">首页</div>
					<div class="navItem" id="navItem2" onclick="selectBar(2)">球星卡</div>
					<div class="navItem" id="navItem3" onclick="selectBar(3)">平台特色</div>
					<div class="navItem" id="navItem4" onclick="selectBar(4)">关于我们</div>
				</div>
			</div>
			<div class="official">
				<img src="../image/officialBg.png" alt="" />
			</div>
			<div class="mark" id="mark">
				<img src="../image/shareMark.png" alt="" />
			</div>
			<div class="centerBoll">
				<img src="/static/image/centerBoll.png" alt="" />
			</div>
			<div class="footerTips">
				<div style="padding-right: 20px;border-right: 2px solid rgba(255,255,255,.5);">版权所有 上海卡遇文化发展有限公司</div>
				<div style="padding-left: 20px;"><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备2024099314号-1
					</a></div>
			</div>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/index.js"></script>
	<script>
		$('.mark').hide()

		function selectBar(e) {
			console.log(e)
			if (e == 4) {
				$('.mark').show()
				$('.centerBoll').hide()
			} else {
				$('.mark').hide()
				$('.centerBoll').show()
			}

			$('.navItem').removeClass('navBarActive')
			$('#navItem' + e).addClass('navBarActive')
		}
		selectBar(1)
	</script>
</html>